{% extends 'base.html' %}

{% block title %}
  发布文章
{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{% static 'css/pub_blog.css' %}">
{% endblock %}

{% block main %}
  <div class="create-article-container">
    <h2 class="section-title">发布新文章</h2>
    <form action="" method="POST">
      {% csrf_token %}
      <div class="form-group">
        <label for="article-title">文章标题</label>
        <input type="text" name="title" placeholder="请输入文章标题" required>
      </div>

      <div class="form-group">
        <label for="article-category">文章分类</label>
        <div class="custom-select">
          <select name="category" required>
            {% for category in categories %}
            	<option value="{{ category.id }}">{{ category.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="form-group">
        <label for="article-content">文章内容</label>
        <textarea name="content" placeholder="在此输入您的文章内容..." required></textarea>
      </div>

      <button type="submit" class="btn btn-primary">
        <i class="fas fa-paper-plane"></i> 发布文章
      </button>
    </form>
  </div>
{% endblock %}

{% block scripts %}
  {{ block.super }}
  <script>
      document.addEventListener('DOMContentLoaded', function() {
          const form = document.getElementById('article-form');
          const contentInput = document.getElementById('article-content');
          const previewContent = document.getElementById('preview-content');

          // Markdown转换函数（简化版）
          function convertMarkdown(text) {
              // 标题转换
              text = text.replace(/^# (.*$)/gim, '<h2>$1</h2>');
              text = text.replace(/^## (.*$)/gim, '<h3>$1</h3>');

              // 粗体
              text = text.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>');

              // 斜体
              text = text.replace(/\*(.*?)\*/gim, '<em>$1</em>');

              // 链接
              text = text.replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2">$1</a>');

              // 代码块
              text = text.replace(/```([\s\S]*?)```/gim, '<pre><code>$1</code></pre>');

              // 行内代码
              text = text.replace(/`(.*?)`/gim, '<code>$1</code>');

              // 引用
              text = text.replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>');

              // 段落
              text = text.replace(/(\n\n|\r\r|\r\n\r\n)/gim, '</p><p>');
              text = '<p>' + text + '</p>';

              // 换行
              text = text.replace(/\n/gim, '<br>');

              return text;
          }

          // 输入内容时更新预览
          contentInput.addEventListener('input', function() {
              if (contentInput.value.trim() === '') {
                  previewContent.innerHTML = '<p class="preview-placeholder">输入内容后，此处将显示文章预览效果...</p>';
              } else {
                  previewContent.innerHTML = convertMarkdown(contentInput.value);
              }
          });

          // 表单提交处理
          form.addEventListener('submit', function(e) {
              e.preventDefault();

              const title = document.getElementById('article-title').value;
              const category = document.getElementById('article-category').value;

              if (!title || !category || !contentInput.value) {
                  alert('请填写所有必填字段');
                  return;
              }

              // 模拟提交成功
              const categoryName = document.querySelector(`#article-category option[value="${category}"]`).textContent;

              alert(`文章 "${title}" 发布成功！\n分类: ${categoryName}`);

              // 重置表单
              form.reset();
              previewContent.innerHTML = '<p class="preview-placeholder">输入内容后，此处将显示文章预览效果...</p>';
          });
      });
  </script>
{% endblock %}